<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>SmartPing Dashboard</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-responsive.min.css" rel="stylesheet">
<link href="css/font-awesome.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/pages/dashboard.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="datatable/css/jquery.dataTables.min.css">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>
<body>
<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <a class="brand" href="index.html">SmartPing Dashbord </a>
      <div class="nav-collapse">
        <ul class="nav pull-right">
          <li></li>
        </ul>
      </div>
      <!--/.nav-collapse -->
    </div>
    <!-- /container -->
  </div>
  <!-- /navbar-inner -->
</div>
<!-- /navbar -->
<div class="subnavbar">
  <div class="subnavbar-inner">
    <div class="container">
      <ul class="mainnav">
        <li><a href="index.html"><i class="icon-mail-forward"></i><span>Forward Ping</span> </a> </li>
        <li><a href="reverse.html"><i class="icon-mail-reply"></i><span>Reverse Ping</span> </a> </li>
        <li ><a href="topology.html"><i class="icon-bar-chart"></i><span>Topology</span> </a> </li>
        <li class="active"><a href="alerts.html"><i class="icon-warning-sign"></i><span>Alerts</span> </a> </li>
        <!--<li><a href="tools.html"><i class="icon-wrench"></i><span>Test Tools</span> </a> </li>-->
        <li><a href="config.html"><i class="icon-cog"></i><span>Config</span> </a> </li>
      </ul>
    </div>
    <!-- /container --> 
  </div>
  <!-- /subnavbar-inner --> 
</div>
<!-- /subnavbar -->
<div class="main" style="margin-top:-20px;">
  <div class="main-inner">
    <div class="container" id="main">
      <div class="row">

        <div class="span2"  >
          <div class="widget widget-table action-table">
            <div class="widget-header"> <i class="icon-th-list"></i>
              <h3>Archives</h3>
            </div>
            <!-- /widget-header -->
            <div class="widget-content">
              <table class="table table-striped table-bordered">
                <thead>
                <tr>
                  <th> Data </th>
                </tr>
                </thead>
                <tbody class="datelist"></tbody>
              </table>
            </div>
            <!-- /widget-content -->
          </div>

        </div>

        <div class="span8">
          <div class="widget widget-table action-table">
            <div class="widget-header"> <i class="icon-th-list"></i>
              <h3>Alert History</h3>
            </div>
            <!-- /widget-header -->
            <div class="widget-content">
              <table class="table table-striped table-bordered" id="mytable">
                <thead>
                <tr>
                  <th> Logtime </th>
                  <th> From </th>
                  <th> To </th>
                  <!--<th> Type </th>-->
                </tr>
                </thead>
                <tbody class="alertlist"></tbody>
              </table>
            </div>
            <!-- /widget-content -->
          </div>
        </div>

        <div class="span2">
          <div class="widget widget-table action-table">
            <div class="widget-header"> <i class="icon-th-list"></i>
              <h3>Agent List</h3>
            </div>
            <!-- /widget-header -->
            <div class="widget-content">
              <table class="table table-striped table-bordered">
                <thead>
                <tr>
                  <th> Agent </th>
                </tr>
                </thead>
                <tbody class="agentlist">

                </tbody>
              </table>
            </div>
            <!-- /widget-content -->
          </div>
        </div>

      </div>


    </div>
    <!-- /container --> 
  </div>
  <!-- /main-inner --> 
</div>
<!-- /main -->

<div class="footer">
  <div class="footer-inner">
    <div class="container">
      <div class="row">
        <div class="span12"> &copy; 2017 <a target="_blank" href="http://smartping.org" >SmartPing.org</a> <span style="float:right" id="verion"></span></div>
        <!-- /span12 --> 
      </div>
      <!-- /row --> 
    </div>
    <!-- /container --> 
  </div>
  <!-- /footer-inner --> 
</div>
<!-- /footer --> 
<!-- Le javascript
================================================== --> 
<!-- Placed at the end of the document so the pages load faster --> 
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="datatable/js/jquery.dataTables.min.js"></script>
<script>

    var ajaxcnt  = 0;

    function getdata(d){
        $(".alertlist").html("");
        $.getJSON("/api/config.json",function(result){
            $.each(result["Targets"], function(i, field){
                if(field.Type=="CS"){
                    $.ajax({
                        dataType: "json",
                        url: 'http://'+field.Addr+':'+result['Port']+'/api/alert.json?date='+d,
                        success: function( result) {
                            $(".alerticon-"+field.Name+"").remove();
                            for(var del in result[0]){
                                var ard=false
                                $(".datelist").find("tr").each(function(){
                                    if($(this).find("td").find("a").html()==result[0][del])
                                    {
                                        ard = true
                                    }
                                });
                                if (ard == false) {
                                    $(".datelist").append("<tr><td><a onclick=getdata(\""+result[0][del]+"\")>"+result[0][del]+"</a></td></tr>");
                                }
                            };
                            for(var dal in result[1]){
                                /*
                                if(result[1][dal]['Alerttype']==1){
                                    alert='<span class="label label-warning">ConnectWarning</span>'
                                }
                                if(result[1][dal]['Alerttype']==2){
                                    alert='<span class="label label-danger">AgentError</span>'
                                }
                                */
                                $(".alertlist").append("<tr><td>"+result[1][dal]['Logtime']+"</td><td>"+result[1][dal]['Fromname']+"</td><td>"+result[1][dal]['Toname']+"</td></tr>");
                            };

                            //$(".datelist").append("<tr><td><a onclick=getdata(\""+result[0][del]+"\")>"+result[0][del]+"</a></td></tr>");
                            $(".alerticon-"+field.Name+"").removeClass("icon-spinner");
                        },
                        timeout: result["Timeout"]*1000
                    }).fail( function( xhr, status ) {
                        $(".alerticon-"+field.Name+"").removeClass("icon-spinner").removeClass("icon-spin").removeClass("animated");
                        $(".alerticon-"+field.Name+"").addClass("icon-warning-sign");
                    });
                }
            });
        });
    }

    function pageFinish(){
        $('#mytable').DataTable({
            "paging": false,
            "aaSorting": [[ 0, "desc" ]]
        });
    }

  $(function(){

      //$('#mytable').DataTable({
      //     "paging": false
      //});

      $.getJSON("/api/config.json",function(result){
          $("#verion").html("Version: "+result["Ver"])
          $.each(result["Targets"], function(i, field){
              if(field.Type=="CS") {
                  if(field.Addr==result["Ip"]){
                      return true;
                  }
                  $(".agentlist").append("<tr><td><i class='icon-spinner icon-spin animated alerticon-" + field.Name + "'></i>&nbsp;<a target='_blank' href='http://" + field.Addr + ":" + result["Port"] + "/alerts.html'>" + field.Name + "</a></td></tr>");
                  ajaxcnt = ajaxcnt +1 ;
                  //console.log(ajaxcnt)
              }
          });
          $.each(result["Targets"], function(i, field){
              if(field.Type=="CS") {
                  $.ajax({
                      dataType: "json",
                      url: 'http://' + field.Addr + ':' + result['Port'] + '/api/alert.json',
                      success: function (result) {
                          $(".alerticon-" + field.Name + "").remove();

                          for (var del in result[0]) {
                              var ard = false
                              $(".datelist").find("tr").each(function () {
                                  if ($(this).find("td").find("a").html() == result[0][del]) {
                                      ard = true
                                  }
                              });
                              if (ard == false) {
                                  $(".datelist").append("<tr><td><a onclick=getdata(\"" + result[0][del] + "\")>" + result[0][del] + "</a></td></tr>");
                              }
                          }
                          ;
                          for (var dal in result[1]) {
                              /*
                              if(result[1][dal]['Alerttype']==1){
                                  alert='<span class="label label-warning">ConnectWarning</span>'
                              }
                              if(result[1][dal]['Alerttype']==2){
                                  alert='<span class="label label-danger">AgentError</span>'
                              }
                              */
                              $(".alertlist").append("<tr><td>" + result[1][dal]['Logtime'] + "</td><td>" + result[1][dal]['Fromname'] + "</td><td>" + result[1][dal]['Toname'] + "</td></tr>");
                          }
                          ;
                          $(".alerticon-" + field.Name + "").removeClass("icon-spinner");
                          ajaxcnt = ajaxcnt -1;
                          if(ajaxcnt==0){
                              pageFinish();
                          }
                          //console.log(ajaxcnt)
                      },
                      timeout: result["Timeout"] * 1000
                  }).fail(function (xhr, status) {
                      $(".alerticon-" + field.Name + "").removeClass("icon-spinner").removeClass("icon-spin").removeClass("animated");
                      $(".alerticon-" + field.Name + "").addClass("icon-warning-sign");
                      ajaxcnt = ajaxcnt -1;
                      if(ajaxcnt==0){
                          pageFinish();
                      }
                      //console.log(ajaxcnt)
                  });
              }
          });
      });
  });
</script>
</body>
</html>
